<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老虎吃人</title>
    <style>
        html {
            font-size: 16px;
        }
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #8B4513 0%, #DEB887 50%, #8B4513 100%);
            color: white;
        }
        
        .game-container {
            text-align: center;
            background: rgba(139, 69, 19, 0.2);
            padding: 2vw;
            border-radius: 2vw;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            max-width: 100vw;
            width: 100vw;
            box-sizing: border-box;
        }
        
        h1 {
            margin-bottom: 2vw;
            font-size: 2.5rem;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            color: #FFD700;
        }
        
        .role-selection {
            margin: 20px 0;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
        }
        
        .role-selection h3 {
            color: #FFD700;
            margin-bottom: 15px;
        }
        
        .role-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .role-button {
            background: linear-gradient(45deg, #FF6B35, #F7931E);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            min-width: 150px;
        }
        
        .role-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        }
        
        .role-button.selected {
            background: linear-gradient(45deg, #28a745, #20c997);
            transform: translateY(-2px);
        }
        
        .game-info {
            margin-bottom: 20px;
            font-size: 1.1rem;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 10px;
            display: none;
        }
        
        .board {
            position: relative;
            width: 100vw;
            max-width: 600px;
            height: 100vw;
            max-height: 600px;
            margin: 0 auto 2vw auto;
            background: #F5DEB3;
            border: 4px solid #8B4513;
            border-radius: 10px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            display: none;
        }
        
        .board-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .line {
            position: absolute;
            background: #8B4513;
            z-index: 1;
        }
        
        .horizontal-line {
            height: 4px;
        }
        
        .vertical-line {
            width: 4px;
        }
        
        .diagonal-line {
            height: 4px;
            transform-origin: left center;
        }
        
        .position {
            position: absolute;
            left: var(--left);
            top: var(--top);
            width: 8vw;
            max-width: 48px;
            min-width: 32px;
            height: 8vw;
            max-height: 48px;
            min-height: 32px;
            border-radius: 50%;
            border: 4px solid #8B4513;
            background: #F5DEB3;
            cursor: pointer;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        .position:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        }
        
        .position.center {
            width: 10vw;
            max-width: 60px;
            min-width: 40px;
            height: 10vw;
            max-height: 60px;
            min-height: 40px;
            font-size: 2.4rem;
        }
        
        .position.tiger {
            background: #FF8C00;
            border-color: #FF4500;
            box-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
        }
        
        .position.person {
            background: #4169E1;
            border-color: #000080;
            box-shadow: 0 0 10px rgba(65, 105, 225, 0.5);
        }
        
        .position.selected {
            box-shadow: 0 0 25px #00FF00;
            transform: translate(-50%, -50%) scale(1.2);
        }
        
        .position.valid-move {
            background: rgba(144, 238, 144, 0.8);
            border-color: #00FF00;
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 10px #00FF00; }
            50% { box-shadow: 0 0 30px #00FF00; }
            100% { box-shadow: 0 0 10px #00FF00; }
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        button {
            background: linear-gradient(45deg, #FF6B35, #F7931E);
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            min-width: 80px;
            min-height: 36px;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        }
        
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        .status {
            margin-top: 20px;
            font-size: 1.1rem;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.4);
            padding: 10px;
            border-radius: 10px;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .rules {
            margin-top: 20px;
            text-align: left;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 10px;
            font-size: 14px;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 15px 0;
            flex-wrap: wrap;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: bold;
        }
        
        .legend-symbol {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: 3px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .tiger-symbol {
            background: #FF8C00;
            border-color: #FF4500;
        }
        
        .person-symbol {
            background: #4169E1;
            border-color: #000080;
        }
        
        .game-board {
            display: none;
        }
        
        .game-board.active {
            display: block;
        }
        
        /* 移动箭头样式 */
        .move-arrow {
            position: absolute;
            z-index: 10;
            pointer-events: none;
        }
        
        .move-arrow svg {
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
        }
        
        @media (max-width: 600px) {
            html { font-size: 13px; }
            .game-container { padding: 1vw; border-radius: 2vw; }
            h1 { font-size: 1.5rem; }
            .board { width: 100vw; height: 100vw; }
            .position { width: 12vw; height: 12vw; font-size: 1.5rem; }
            .position.center { width: 16vw; height: 16vw; font-size: 1.8rem; }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>老虎吃人</h1>
        
        <!-- 角色选择界面 -->
        <div class="role-selection" id="role-selection">
            <h3>🎮 选择你的角色</h3>
            <div class="role-buttons">
                <button class="role-button" onclick="selectRole('tiger')">
                    🐅 我要当老虎
                </button>
                <button class="role-button" onclick="selectRole('person')">
                    👤 我要当人类
                </button>
            </div>
            <div class="status">选择你想扮演的角色开始游戏</div>
        </div>
        
        <!-- 游戏界面 -->
        <div class="game-board" id="game-board">
            <div class="game-info" id="game-info">
                <div>你的角色: <span id="player-role">-</span></div>
                <div>当前回合: <span id="current-turn">老虎先走</span></div>
                <div>剩余人数: <span id="people-count">16</span> | 老虎吃掉: <span id="eaten-count">0</span></div>
            </div>
            
            <div class="legend">
                <div class="legend-item">
                    <div class="legend-symbol tiger-symbol">🐅</div>
                    <span>老虎</span>
                </div>
                <div class="legend-item">
                    <div class="legend-symbol person-symbol">👤</div>
                    <span>人类</span>
                </div>
            </div>
            
            <div class="board" id="board">
                <!-- 使用SVG绘制棋盘线条 -->
                <svg width="100%" height="100%" viewBox="0 0 600 600" style="position: absolute; top: 0; left: 0; z-index: 1;">
                    <!-- 外框正方形 -->
                    <rect x="0" y="0" width="600" height="600" fill="none" stroke="#8B4513" stroke-width="4"/>
                    
                    <!-- 主对角线 -->
                    <line x1="0" y1="0" x2="600" y2="600" stroke="#8B4513" stroke-width="4"/>
                    <line x1="600" y1="0" x2="0" y2="600" stroke="#8B4513" stroke-width="4"/>
                    
                    <!-- 对边中点之间的连线（水平和垂直中线） -->
                    <line x1="300" y1="0" x2="300" y2="600" stroke="#8B4513" stroke-width="3"/>
                    <line x1="0" y1="300" x2="600" y2="300" stroke="#8B4513" stroke-width="3"/>
                    
                    <!-- 四条边的中点之间的连线（形成内部小正方形） -->
                    <!-- 上边中点到右边中点 -->
                    <line x1="300" y1="0" x2="600" y2="300" stroke="#8B4513" stroke-width="3"/>
                    <!-- 右边中点到下边中点 -->
                    <line x1="600" y1="300" x2="300" y2="600" stroke="#8B4513" stroke-width="3"/>
                    <!-- 下边中点到左边中点 -->
                    <line x1="300" y1="600" x2="0" y2="300" stroke="#8B4513" stroke-width="3"/>
                    <!-- 左边中点到上边中点 -->
                    <line x1="0" y1="300" x2="300" y2="0" stroke="#8B4513" stroke-width="3"/>
                    
                    <!-- 四个内部交叉点到中心的连线 -->
                    <line x1="150" y1="150" x2="300" y2="300" stroke="#8B4513" stroke-width="2"/>
                    <line x1="450" y1="150" x2="300" y2="300" stroke="#8B4513" stroke-width="2"/>
                    <line x1="150" y1="450" x2="300" y2="300" stroke="#8B4513" stroke-width="2"/>
                    <line x1="450" y1="450" x2="300" y2="300" stroke="#8B4513" stroke-width="2"/>
                </svg>
            </div>
            
            <div class="controls">
                <button onclick="resetGame()">重新开始</button>
                <button onclick="backToRoleSelection()">重选角色</button>
                <button onclick="toggleRules()">游戏规则</button>
            </div>
            
            <div class="status" id="status">准备开始游戏</div>
            
            <div class="rules" id="rules" style="display: none;">
                <h3>🐅 老虎吃人 游戏规则</h3>
                <p><strong>初始布局：</strong></p>
                <ul>
                    <li>老虎在中心虎洞</li>
                    <li>16个人分布在四个内部交叉点，每个交叉点4个人</li>
                </ul>
                <p><strong>行棋规则：</strong></p>
                <ol>
                    <li><strong>老虎先走</strong></li>
                    <li><strong>老虎移动：</strong> 有两种移动方式：
                        <ul>
                            <li>普通移动：移动到相邻的空节点（不吃人）</li>
                            <li>跳跃吃人：跳过相邻的有人节点，落在同一直线上的第二个空节点，并吃掉被跳过的人</li>
                        </ul>
                    </li>
                    <li><strong>人类移动：</strong> 可以移动到相邻的非老虎节点（允许与其他人叠加），同一节点可有多人，人数会自动更新</li>
                    <li><strong>跳跃规则：</strong> 老虎跳跃的落点必须为空，被跳过的节点必须有人</li>
                </ol>
                <p><strong>胜负条件：</strong></p>
                <ul>
                  <li>老虎吃掉5个人，立即获胜</li>
                  <li>只有当老虎被困在中心虎洞（4号位）且无法移动时，人类才算获胜</li>
                  <li>老虎被困在其他位置不算人类胜利，游戏继续，直到老虎被困入虎洞或吃掉5人</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        // 音效系统
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        
        function playSound(frequency, duration, type = 'sine', volume = 0.3) {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
            oscillator.type = type;
            
            gainNode.gain.setValueAtTime(0, audioContext.currentTime);
            gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + 0.01);
            gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + duration);
        }
        
        const sounds = {
            select: () => playSound(800, 0.15, 'sine', 0.2),
            move: () => playSound(600, 0.12, 'triangle', 0.15),
            eat: () => {
                playSound(300, 0.3, 'sawtooth', 0.4);
                setTimeout(() => playSound(200, 0.4, 'square', 0.3), 150);
            },
            victory: () => {
                playSound(523, 0.15, 'sine', 0.25);
                setTimeout(() => playSound(659, 0.15, 'sine', 0.25), 150);
                setTimeout(() => playSound(784, 0.15, 'sine', 0.25), 300);
                setTimeout(() => playSound(1047, 0.3, 'sine', 0.3), 450);
            },
            defeat: () => {
                playSound(400, 0.2, 'sine', 0.3);
                setTimeout(() => playSound(350, 0.2, 'sine', 0.3), 200);
                setTimeout(() => playSound(300, 0.4, 'sine', 0.3), 400);
            }
        };
        
        function initAudio() {
            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }
        }
        
        // 游戏状态
        let gameState = {
            board: Array(13).fill(0), // 0: 空, 1+: 人数, -1: 老虎
            playerRole: null, // 'tiger' 或 'person'
            currentTurn: 2, // 1: 人, 2: 老虎 (老虎先走)
            selectedPiece: null,
            gameOver: false,
            eatenPeople: 0
        };
        
        // 棋盘位置 (13个特定位置) - 像素坐标
        const positions = [
            // 大正方形4个角和边中点
            {x: 0, y: 0},       // 0 - 左上角
            {x: 300, y: 0},     // 1 - 上边中点
            {x: 600, y: 0},     // 2 - 右上角
            {x: 0, y: 300},     // 3 - 左边中点
            {x: 300, y: 300},   // 4 - 中心交叉点（老虎洞）
            {x: 600, y: 300},   // 5 - 右边中点
            {x: 0, y: 600},     // 6 - 左下角
            {x: 300, y: 600},   // 7 - 下边中点
            {x: 600, y: 600},   // 8 - 右下角
            // 4个内部交叉点
            {x: 150, y: 150},   // 9 - 左上内部交叉点
            {x: 450, y: 150},   // 10 - 右上内部交叉点
            {x: 150, y: 450},   // 11 - 左下内部交叉点
            {x: 450, y: 450}    // 12 - 右下内部交叉点
        ];
        
        // 位置连接关系 (13个位置的连接)
        const connections = {
            0: [1, 3, 9],                    // 左上角
            1: [0, 2, 4, 9, 10],            // 上边中点
            2: [1, 5, 10],                  // 右上角
            3: [0, 4, 6, 9, 11],            // 左边中点
            4: [1, 3, 5, 7, 9, 10, 11, 12], // 中心交叉点
            5: [2, 4, 8, 10, 12],           // 右边中点
            6: [3, 7, 11],                  // 左下角
            7: [4, 6, 8, 11, 12],           // 下边中点
            8: [5, 7, 12],                  // 右下角
            9: [0, 1, 3, 4],                // 左上交叉点
            10: [1, 2, 4, 5],               // 右上交叉点
            11: [3, 4, 6, 7],               // 左下交叉点
            12: [4, 5, 7, 8]                // 右下交叉点
        };
        
        // 选择角色
        function selectRole(role) {
            initAudio();
            sounds.select();
            
            gameState.playerRole = role;
            
            // 更新按钮状态
            document.querySelectorAll('.role-button').forEach(btn => {
                btn.classList.remove('selected');
            });
            event.target.classList.add('selected');
            
            setTimeout(() => {
                document.getElementById('role-selection').style.display = 'none';
                document.getElementById('game-board').classList.add('active');
                document.getElementById('game-info').style.display = 'block';
                document.getElementById('board').style.display = 'block';
                
                initGame();
            }, 500);
        }
        
        // 初始化游戏
        function initGame() {
            // 重置游戏状态
            gameState.board = Array(13).fill(0);
            gameState.currentTurn = 2; // 老虎先走
            gameState.selectedPiece = null;
            gameState.gameOver = false;
            gameState.eatenPeople = 0;
            
            // 初始布局：老虎在中心交叉点(4)
            gameState.board[4] = -1; // 老虎在中心
            
            // 4个非中心交叉点各放4人（共16人）
            gameState.board[9] = 4;   // 左上交叉点：4人
            gameState.board[10] = 4;  // 右上交叉点：4人  
            gameState.board[11] = 4;  // 左下交叉点：4人
            gameState.board[12] = 4;  // 右下交叉点：4人
            
            initBoard();
            updateDisplay();
            
            // 检查是否需要AI先走（老虎先走，如果玩家选择人类角色）
            if (gameState.playerRole === 'person' && gameState.currentTurn === 2) {
                setTimeout(() => {
                    aiMove();
                }, 1000);
            }
        }
        
        // 初始化棋盘显示
        function initBoard() {
            const board = document.getElementById('board');
            
            // 清除现有位置
            const existingPositions = board.querySelectorAll('.position');
            existingPositions.forEach(pos => pos.remove());
            
            // 创建位置点
            for (let i = 0; i < 13; i++) {
                const pos = document.createElement('div');
                pos.className = i === 4 ? 'position center' : 'position';
                // 百分比定位
                pos.style.setProperty('--left', (positions[i].x / 600 * 100) + '%');
                pos.style.setProperty('--top', (positions[i].y / 600 * 100) + '%');
                pos.dataset.index = i;
                pos.onclick = () => handlePositionClick(i);
                board.appendChild(pos);
            }
        }
        
        // 处理位置点击
        function handlePositionClick(index) {
            initAudio();
            
            if (gameState.gameOver) return;
            
            // 检查是否轮到玩家
            if ((gameState.playerRole === 'tiger' && gameState.currentTurn !== 2) ||
                (gameState.playerRole === 'person' && gameState.currentTurn !== 1)) {
                return;
            }
            
            if (gameState.selectedPiece === null) {
                // 选择棋子
                if ((gameState.currentTurn === 2 && gameState.board[index] === -1) ||
                    (gameState.currentTurn === 1 && (gameState.board[index] === 1 || gameState.board[index] > 1))) {
                    gameState.selectedPiece = index;
                    showValidMoves(index);
                    updateDisplay();
                }
            } else {
                // 移动棋子
                if (index === gameState.selectedPiece) {
                    // 取消选择
                    gameState.selectedPiece = null;
                    clearValidMoves();
                    updateDisplay();
                } else if (isValidMove(gameState.selectedPiece, index)) {
                    makeMove(gameState.selectedPiece, index);
                } else {
                    // 选择新棋子
                    if ((gameState.currentTurn === 2 && gameState.board[index] === -1) ||
                        (gameState.currentTurn === 1 && (gameState.board[index] === 1 || gameState.board[index] > 1))) {
                        gameState.selectedPiece = index;
                        showValidMoves(index);
                        updateDisplay();
                    }
                }
            }
        }
        
        // 判断三点是否共线且mid在from和to之间
        function isColinearAndBetween(from, mid, to) {
            const a = positions[from];
            const b = positions[mid];
            const c = positions[to];
            // 共线
            const cross = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
            if (cross !== 0) return false;
            // mid在from和to之间
            const minX = Math.min(a.x, c.x), maxX = Math.max(a.x, c.x);
            const minY = Math.min(a.y, c.y), maxY = Math.max(a.y, c.y);
            return (b.x >= minX && b.x <= maxX && b.y >= minY && b.y <= maxY && !(b.x === a.x && b.y === a.y) && !(b.x === c.x && b.y === c.y));
        }

        // 检查有效移动
        function isValidMove(from, to) {
            const piece = gameState.board[from];
            if (piece === 1 || piece > 1) {
                // 人可以移动到相邻的非老虎节点（允许叠加）
                return connections[from].includes(to) && gameState.board[to] !== -1;
            } else if (piece === -1) {
                // 老虎有两种移动方式：
                // 1. 普通移动：到相邻的空节点（不吃人）
                if (connections[from].includes(to) && gameState.board[to] === 0) {
                    return true;
                }
                // 2. 跳跃吃人：跳过有人的节点落到空节点，且三点共线
                for (const mid of connections[from]) {
                    if ((gameState.board[mid] === 1 || gameState.board[mid] > 1) && 
                        connections[mid] && connections[mid].includes(to) &&
                        isColinearAndBetween(from, mid, to) && gameState.board[to] === 0) {
                        return true; // 可以跳跃吃人
                    }
                }
                return false;
            }
            return false;
        }
        
        // 执行移动
        function makeMove(from, to) {
            const piece = gameState.board[from];
            let eatenPerson = false;
            // 检查老虎吃人（只有跳跃移动才吃人）
            if (piece === -1) {
                // 首先检查是否是普通移动（相邻位置）
                if (connections[from].includes(to) && gameState.board[to] === 0) {
                    // 这是普通移动，不吃人
                    sounds.move();
                } else {
                    // 检查是否是跳跃吃人移动
                    for (const mid of connections[from]) {
                        const hasPersonAtMid = (gameState.board[mid] === 1 || gameState.board[mid] > 1);
                        const canReachTarget = connections[mid] && connections[mid].includes(to);
                        if (hasPersonAtMid && canReachTarget && isColinearAndBetween(from, mid, to) && gameState.board[to] === 0) {
                            if (gameState.board[mid] > 1) {
                                // 如果是多人位置，减少1人
                                gameState.board[mid]--;
                            } else {
                                // 如果是单人，清空位置
                                gameState.board[mid] = 0;
                            }
                            gameState.eatenPeople++;
                            eatenPerson = true;
                            sounds.eat();
                            break;
                        }
                    }
                    // 如果既不是普通移动也不是跳跃吃人，说明移动无效
                    if (!eatenPerson) {
                        console.error('错误：无效的老虎移动！');
                        return;
                    }
                }
            } else {
                // 人类移动
                sounds.move();
            }
            // 移动棋子
            if (piece === -1) {
                // 老虎移动：先清空原位置，再设置新位置
                gameState.board[from] = 0;
                gameState.board[to] = -1;
            } else if (gameState.board[from] > 1) {
                // 多人位置，移动1人
                gameState.board[from]--;
                if (gameState.board[to] === 0) {
                    gameState.board[to] = 1;
                } else if (gameState.board[to] > 0) {
                    gameState.board[to]++;
                }
            } else {
                // 单个人类棋子移动
                gameState.board[from] = 0;
                if (gameState.board[to] === 0) {
                    gameState.board[to] = 1;
                } else if (gameState.board[to] > 0) {
                    gameState.board[to]++;
                }
            }
            gameState.selectedPiece = null;
            // 显示移动路径箭头
            showMoveArrow(from, to);
            clearValidMoves();
            updateDisplay();
            // 检查游戏结束
            if (checkGameEnd()) return;
            // 切换回合
            gameState.currentTurn = gameState.currentTurn === 1 ? 2 : 1;
            updateDisplay();
            // 只有当前回合是AI才调用aiMove
            if ((gameState.playerRole === 'tiger' && gameState.currentTurn === 1) ||
                (gameState.playerRole === 'person' && gameState.currentTurn === 2)) {
                setTimeout(() => {
                    aiMove();
                }, 1000);
            }
        }
        
        // 显示有效移动
        function showValidMoves(from) {
            clearValidMoves();
            
            const piece = gameState.board[from];
            
            // 使用统一的移动验证逻辑
            for (let i = 0; i < 13; i++) {
                if (isValidMove(from, i)) {
                    const pos = document.querySelector(`[data-index="${i}"]`);
                    if (pos) {
                        pos.classList.add('valid-move');
                    }
                }
            }
        }
        
        // 清除有效移动显示
        function clearValidMoves() {
            const validMoves = document.querySelectorAll('.valid-move');
            validMoves.forEach(pos => pos.classList.remove('valid-move'));
        }
        
        // AI移动
        function aiMove() {
            if (gameState.gameOver) return;
            const aiPieces = [];
            for (let i = 0; i < 13; i++) {
                if ((gameState.currentTurn === 2 && gameState.board[i] === -1) ||
                    (gameState.currentTurn === 1 && (gameState.board[i] === 1 || gameState.board[i] > 1))) {
                    aiPieces.push(i);
                }
            }
            let bestMove = null;
            let bestScore = -Infinity;
            // 只允许AI每回合移动一个人或老虎
            for (const piece of aiPieces) {
                for (let i = 0; i < 13; i++) {
                    if (isValidMove(piece, i)) {
                        let score = 0;
                        if (gameState.currentTurn === 2) {
                            // 老虎AI
                            // ... existing code ...
                        } else {
                            // 人类AI
                            score = evaluateHumanMove(piece, i);
                        }
                        if (score > bestScore) {
                            bestScore = score;
                            bestMove = {from: piece, to: i};
                        }
                    }
                }
            }
            if (bestMove) {
                setTimeout(() => {
                    makeMove(bestMove.from, bestMove.to);
                }, 500);
            } else {
                // AI无法移动，不判定人类胜利，只切换到人类回合，由checkGameEnd唯一判定胜负
                gameState.currentTurn = 1;
                updateDisplay();
            }
        }
        
        // 高级移动评估函数
        function evaluateMoveAdvanced(from, to) {
            if (gameState.currentTurn === 2) {
                return evaluateTigerMove(from, to);
            } else {
                return evaluateHumanMove(from, to);
            }
        }
        
        // 老虎AI战略评估
        function evaluateTigerMove(from, to) {
            let score = 0;
            
            // 检查是否是跳跃吃人移动
            let isJumpEat = false;
            for (const mid of connections[from]) {
                if ((gameState.board[mid] === 1 || gameState.board[mid] > 1) && 
                    connections[mid] && connections[mid].includes(to)) {
                    isJumpEat = true;
                    // 优先吃人，评估吃人价值
                    const peopleCount = gameState.board[mid] > 1 ? gameState.board[mid] : 1;
                    score += 200 + peopleCount * 50;
                    
                    // 如果吃掉后能继续吃人，额外加分
                    const futureEats = countFutureEats(to);
                    score += futureEats * 30;
                    break;
                }
            }
            
            // 如果不是跳跃吃人，评估普通移动
            if (!isJumpEat) {
                // 普通移动的基础分数较低
                score += 50;
            }
            
            // 位置战略价值
            if (to === 4) {
                score += 40; // 中心位置控制力强
            } else {
                // 边缘位置根据连接数评估
                score += connections[to].length * 8;
            }
            
            // 移动自由度评估
            const mobilityAfterMove = countValidMoves(to, -1);
            score += mobilityAfterMove * 5;
            
            // 威胁评估 - 移动后能威胁多少人
            const threatenedPeople = countThreatenedPeople(to);
            score += threatenedPeople * 15;
            
            // 避免被围困
            const escapeRoutes = countEscapeRoutes(to);
            if (escapeRoutes < 2) {
                score -= 50; // 避免进入死角
            }
            
            // 战略位置奖励
            if (isStrategicPosition(to)) {
                score += 25;
            }
            
            return score + Math.random() * 5; // 少量随机性避免重复
        }
        
        // 人类AI战略评估
        function evaluateHumanMove(from, to) {
            let score = 0;
            const tigerPos = gameState.board.indexOf(-1);
            // 1. 判断老虎下一步所有跳吃落点，必须优先踩住
            let tigerJumpTargets = new Set();
            for (const mid of connections[tigerPos]) {
                if ((gameState.board[mid] === 1 || gameState.board[mid] > 1)) {
                    for (const tigerTo of connections[mid]) {
                        if (isColinearAndBetween(tigerPos, mid, tigerTo) && gameState.board[tigerTo] === 0) {
                            tigerJumpTargets.add(tigerTo);
                        }
                    }
                }
            }
            if (tigerJumpTargets.size === 1) {
                // 只有一个落点，必须踩住
                if (tigerJumpTargets.has(to)) {
                    score += 5000;
                } else {
                    score -= 5000;
                }
            } else if (tigerJumpTargets.size > 1) {
                // 多个落点，必须踩住其中一个
                if (tigerJumpTargets.has(to)) {
                    score += 4000;
                } else {
                    score -= 4000;
                }
            }
            // 2. 多步预判：模拟本步后老虎所有吃人可能
            let willBeJumpEaten = false;
            let willBeEatenNextTiger = false;
            // 模拟人类移动后的棋盘
            const tempBoard = [...gameState.board];
            if (tempBoard[from] > 1) {
                tempBoard[from]--;
                tempBoard[to] = tempBoard[to] === 0 ? 1 : tempBoard[to] + 1;
            } else {
                tempBoard[from] = 0;
                tempBoard[to] = 1;
            }
            // 检查老虎所有跳吃
            for (let tigerTo = 0; tigerTo < 13; tigerTo++) {
                if (tigerTo === tigerPos) continue;
                // 跳吃
                for (const mid of connections[tigerPos]) {
                    if ((tempBoard[mid] === 1 || tempBoard[mid] > 1) && connections[mid] && connections[mid].includes(tigerTo) && isColinearAndBetween(tigerPos, mid, tigerTo) && tempBoard[tigerTo] === 0) {
                        willBeJumpEaten = true;
                        break;
                    }
                }
                // 普通吃
                if (connections[tigerPos].includes(tigerTo) && tempBoard[tigerTo] === 0) {
                    // 不算吃人，但可移动
                }
                if (willBeJumpEaten) break;
            }
            if (willBeJumpEaten) score -= 4000;
            // 2. 本步直接被老虎跳吃
            for (const mid of connections[tigerPos]) {
                if ((gameState.board[mid] === 1 || gameState.board[mid] > 1) && connections[mid] && connections[mid].includes(to) && isColinearAndBetween(tigerPos, mid, to)) {
                    score -= 3000;
                    break;
                }
            }
            // 3. 避免被老虎普通吃
            if (canTigerEat(tigerPos, to)) {
                score -= 1200;
            }
            // 4. 优先组团包围，靠近同伴、形成链条
            let teamScore = 0;
            for (const adj of connections[to]) {
                if (gameState.board[adj] === 1 || gameState.board[adj] > 1) teamScore += 1;
            }
            score += teamScore * 40;
            if (teamScore === 0) score -= 100;
            // 5. 优先围堵老虎向4号位移动并封锁其出路
            const distBefore = getDistance(tigerPos, 4);
            const distAfter = getDistance(to, 4);
            if (distAfter < distBefore) score += 300;
            if ([1,3,5,7,9,10,11,12].includes(to) && connections[to].includes(4)) score += 150;
            // 6. 优先减少老虎可移动格数
            const tigerMobilityBefore = countValidMoves(tigerPos, -1);
            let tigerMobilityAfter = 0;
            for (let i = 0; i < 13; i++) {
                if (tempBoard[i] === -1) {
                    tigerMobilityAfter = countValidMoves(i, -1);
                    break;
                }
            }
            score += (tigerMobilityBefore - tigerMobilityAfter) * 200;
            // 7. 避免重复来回
            if (gameState.lastHumanMove && gameState.lastHumanMove.from === to && gameState.lastHumanMove.to === from) {
                score -= 120;
            }
            // 8. 靠近老虎加分
            const dist = getDistance(to, tigerPos);
            score += (8 - dist) * 8;
            // 9. 优先占据老虎周围关键点和通道
            if (connections[tigerPos].includes(to)) score += 80;
            // 10. 保护人群：如果to靠近人群加分
            for (let i = 0; i < 13; i++) {
                if (gameState.board[i] > 1 && getDistance(to, i) === 1) score += 30;
            }

            // 11. 分散奖励：如果to点周围2格内人很少，加极高分，聚集惩罚更重
            let nearbyPeople = 0;
            for (let i = 0; i < 13; i++) {
                if (i !== from && (gameState.board[i] === 1 || gameState.board[i] > 1) && getDistance(to, i) <= 2) {
                    nearbyPeople += gameState.board[i] > 1 ? gameState.board[i] : 1;
                }
            }
            if (nearbyPeople === 0) score += 500; // 极强分散
            else if (nearbyPeople === 1) score += 100;
            else if (nearbyPeople >= 2) score -= 300; // 更重聚集惩罚

            // 12. 占据空点极高奖励
            if (gameState.board[to] === 0) score += 200;

            // 13. 边角/边奖励
            if ([0,2,6,8].includes(to)) score += 30;
            if ([1,3,5,7].includes(to)) score += 15;

            // 17. 堵老虎所有可移动点
            let tigerMoves = [];
            for (let i = 0; i < 13; i++) {
                if (isValidMove(tigerPos, i) && gameState.board[i] === 0) {
                    tigerMoves.push(i);
                }
            }
            // 如果to是老虎可移动点，优先占据
            if (tigerMoves.includes(to)) score += 300;
            // 如果老虎只有1个可移动点，且to正好是这个点，极高分
            if (tigerMoves.length === 1 && tigerMoves[0] === to) score += 1000;

            // 18. 对于来回聚集的点（如4、7、6、0），如果该点已有2人及以上，再去则大幅减分
            if (([4,7,6,0].includes(to)) && gameState.board[to] > 1) score -= 400;

            // 14. 放虎入洞策略：如果老虎被困且不在4号位，优先撤开一条通往4号位的通道（让老虎进洞），但撤开时要保证不会被吃子
            const tigerPos2 = gameState.board.indexOf(-1);
            let tigerCanMove2 = false;
            for (let i = 0; i < 13; i++) {
                if (isValidMove(tigerPos2, i)) {
                    tigerCanMove2 = true;
                    break;
                }
            }
            if (!tigerCanMove2 && tigerPos2 !== 4) {
                // 进入"放虎阶段"
                function bfsPath(start, end, board) {
                    const queue = [[start]];
                    const visited = new Set([start]);
                    while (queue.length > 0) {
                        const path = queue.shift();
                        const last = path[path.length - 1];
                        if (last === end) return path;
                        for (const next of connections[last]) {
                            if (!visited.has(next)) {
                                visited.add(next);
                                queue.push([...path, next]);
                            }
                        }
                    }
                    return null;
                }
                const path = bfsPath(tigerPos2, 4, gameState.board);
                if (path) {
                    for (let j = 1; j < path.length - 1; j++) { // 跳过起点和终点
                        const step = path[j];
                        if (gameState.board[step] > 0) {
                            // 如果本次移动能让from=step，to=step的相邻空点，且不会被老虎吃掉，则大加分
                            if (from === step && gameState.board[to] === 0 && connections[step].includes(to)) {
                                // 检查撤开后老虎是否能跳吃to
                                let safe = true;
                                for (const mid of connections[tigerPos2]) {
                                    if ((gameState.board[mid] === 1 || gameState.board[mid] > 1 || (from === mid && to !== tigerPos2)) && connections[mid] && connections[mid].includes(to) && isColinearAndBetween(tigerPos2, mid, to)) {
                                        safe = false;
                                        break;
                                    }
                                }
                                if (safe) score += 2000;
                            }
                        }
                    }
                }
            }

            // 19. 优先占据与老虎相邻的空点（安全前提下）
            if (connections[tigerPos].includes(to) && gameState.board[to] === 0) {
                // 检查本步后是否会被老虎吃掉
                let safe = true;
                for (const mid of connections[tigerPos]) {
                    if ((gameState.board[mid] === 1 || gameState.board[mid] > 1 || (from === mid && to !== tigerPos)) && connections[mid] && connections[mid].includes(to) && isColinearAndBetween(tigerPos, mid, to)) {
                        safe = false;
                        break;
                    }
                }
                if (safe) score += 1200; // 极高优先级堵老虎
            }

            return score + Math.random() * 2;
        }
        
        // 辅助函数：计算未来可吃人数
        function countFutureEats(pos) {
            let count = 0;
            for (const adj of connections[pos]) {
                if (gameState.board[adj] === 1 || gameState.board[adj] > 1) {
                    for (const target of connections[adj]) {
                        if (gameState.board[target] === 0) {
                            count++;
                        }
                    }
                }
            }
            return count;
        }
        
        // 辅助函数：计算有效移动数
        function countValidMoves(pos, piece) {
            let count = 0;
            for (let i = 0; i < 13; i++) {
                if (gameState.board[i] === 0) {
                    if (piece === -1) {
                        // 老虎的两种移动方式
                        // 1. 普通移动到相邻空节点
                        if (connections[pos].includes(i)) {
                            count++;
                        } else {
                            // 2. 跳跃吃人移动
                            for (const mid of connections[pos]) {
                                if ((gameState.board[mid] === 1 || gameState.board[mid] > 1) && 
                                    connections[mid] && connections[mid].includes(i)) {
                                    count++;
                                    break;
                                }
                            }
                        }
                    } else {
                        // 人类的移动规则
                        if (connections[pos].includes(i)) {
                            count++;
                        }
                    }
                }
            }
            return count;
        }
        
        // 辅助函数：计算威胁的人数
        function countThreatenedPeople(tigerPos) {
            let count = 0;
            for (const adj of connections[tigerPos]) {
                if (gameState.board[adj] === 1 || gameState.board[adj] > 1) {
                    for (const target of connections[adj]) {
                        if (gameState.board[target] === 0) {
                            count += gameState.board[adj] > 1 ? gameState.board[adj] : 1;
                            break;
                        }
                    }
                }
            }
            return count;
        }
        
        // 辅助函数：计算逃跑路线
        function countEscapeRoutes(pos) {
            let routes = 0;
            for (const adj of connections[pos]) {
                if (gameState.board[adj] === 0) {
                    routes++;
                }
            }
            return routes;
        }
        
        // 辅助函数：判断是否为战略位置
        function isStrategicPosition(pos) {
            // 中心和交叉点是战略位置
            return pos === 4 || [9, 10, 11, 12].includes(pos);
        }
        
        // 辅助函数：评估与人群的接近程度
        function evaluateProximityToPeople(pos) {
            let proximity = 0;
            for (let i = 0; i < 13; i++) {
                if (gameState.board[i] === 1 || gameState.board[i] > 1) {
                    const distance = getDistance(pos, i);
                    if (distance <= 2) {
                        proximity += (gameState.board[i] > 1 ? gameState.board[i] : 1) / distance;
                    }
                }
            }
            return proximity;
        }
        
        // 辅助函数：判断是否为关键封锁位置
        function isKeyBlockingPosition(pos, tigerPos) {
            // 检查这个位置是否能有效限制老虎移动
            const tigerConnections = connections[tigerPos];
            return tigerConnections.includes(pos);
        }
        
        // 辅助函数：判断是否在保护人群
        function isProtectingGroup(from, to) {
            // 检查移动是否有助于保护其他人类
            for (let i = 0; i < 13; i++) {
                if ((gameState.board[i] === 1 || gameState.board[i] > 1) && i !== from) {
                    if (getDistance(to, i) < getDistance(from, i)) {
                        return true;
                    }
                }
            }
            return false;
        }
        
        // 辅助函数：检查老虎是否能吃到某位置
        function canTigerEat(tigerPos, targetPos) {
            for (const mid of connections[tigerPos]) {
                if (connections[mid] && connections[mid].includes(targetPos)) {
                    return true;
                }
            }
            return false;
        }
        
        // 辅助函数：评估团队协作
        function evaluateTeamwork(pos) {
            let teamwork = 0;
            for (const adj of connections[pos]) {
                if (gameState.board[adj] === 1 || gameState.board[adj] > 1) {
                    teamwork += gameState.board[adj] > 1 ? gameState.board[adj] : 1;
                }
            }
            return teamwork;
        }
        
        // 辅助函数：计算两点距离（图上最短路径）
        function getDistance(pos1, pos2) {
            if (pos1 === pos2) return 0;
            if (connections[pos1].includes(pos2)) return 1;
            
            // 简化的距离计算（BFS会更准确但计算量大）
            const visited = new Set();
            const queue = [{pos: pos1, dist: 0}];
            
            while (queue.length > 0) {
                const {pos, dist} = queue.shift();
                if (visited.has(pos)) continue;
                visited.add(pos);
                
                if (pos === pos2) return dist;
                
                for (const next of connections[pos]) {
                    if (!visited.has(next)) {
                        queue.push({pos: next, dist: dist + 1});
                    }
                }
            }
            
            return 10; // 不可达
        }
        
        // 辅助函数：判断是否控制关键通道
        function isControllingPassage(pos, tigerPos) {
            // 检查是否控制了老虎的重要移动路径
            const tigerMoves = [];
            for (let i = 0; i < 13; i++) {
                if (isValidMove(tigerPos, i)) {
                    tigerMoves.push(i);
                }
            }
            
            // 如果这个位置能阻止老虎的多个移动选择
            return tigerMoves.filter(move => getDistance(pos, move) <= 1).length >= 2;
        }
        
        // 检查游戏结束
        function checkGameEnd() {
            const tigerPos = gameState.board.indexOf(-1);
            let totalPeople = 0;
            for (let i = 0; i < gameState.board.length; i++) {
                if (gameState.board[i] > 0) totalPeople += gameState.board[i];
            }
            // 只有老虎在4号位且无法移动时，人类才算胜利
            if (tigerPos === 4) {
                let tigerCanMove = false;
                for (let i = 0; i < 13; i++) {
                    if (isValidMove(tigerPos, i)) {
                        tigerCanMove = true;
                        break;
                    }
                }
                if (!tigerCanMove) {
                    gameState.gameOver = true;
                    if (gameState.playerRole === 'person') {
                        sounds.victory();
                        document.getElementById('status').textContent = '🎉 恭喜！你把老虎困在虎洞！人类获胜！';
                    } else {
                        sounds.defeat();
                        document.getElementById('status').textContent = '💀 你被困在虎洞！人类获胜！';
                    }
                    return true;
                }
            }
            // 老虎吃掉5个人直接胜利
            if (gameState.eatenPeople >= 5) {
                gameState.gameOver = true;
                if (gameState.playerRole === 'tiger') {
                    sounds.victory();
                    document.getElementById('status').textContent = '🎉 恭喜！你吃掉了5个人，已经无法被堵死，老虎获胜！';
                } else {
                    sounds.defeat();
                    document.getElementById('status').textContent = '💀 老虎吃掉了5个人，人类无法堵死老虎，老虎获胜！';
                }
                return true;
            }
            // 老虎被困但不在中心，游戏继续，切换到人类回合
            let tigerCanMove = false;
            for (let i = 0; i < 13; i++) {
                if (isValidMove(tigerPos, i)) {
                    tigerCanMove = true;
                    break;
                }
            }
            if (!tigerCanMove && tigerPos !== 4) {
                document.getElementById('status').textContent = '😅 老虎被困但不在虎洞，游戏继续！请继续努力把老虎逼入虎洞！';
                gameState.currentTurn = 1;
                updateDisplay();
                return false;
            }
            // 检查人类是否太少（保留原逻辑，防止极端情况）
            if (totalPeople < 4) {
                gameState.gameOver = true;
                if (gameState.playerRole === 'tiger') {
                    sounds.victory();
                    document.getElementById('status').textContent = '🎉 恭喜！你吃掉了足够多的人！';
                } else {
                    sounds.defeat();
                    document.getElementById('status').textContent = '💀 人类数量不足！老虎获胜！';
                }
                return true;
            }
            return false;
        }
        
        // 更新显示
        function updateDisplay() {
            const positions = document.querySelectorAll('.position');
            
            positions.forEach((pos, index) => {
                const cell = gameState.board[index];
                
                // 重置位置样式
                pos.className = index === 4 ? 'position center' : 'position';
                pos.textContent = '';
                pos.style.fontSize = '28px';
                pos.style.fontWeight = 'normal';
                pos.style.color = '#333';
                
                // 根据棋盘状态设置显示
                if (cell === -1) {
                    // 老虎
                    pos.classList.add('tiger');
                    pos.textContent = '🐅';
                } else if (cell === 1) {
                    // 单个人
                    pos.classList.add('person');
                    pos.textContent = '👤';
                } else if (cell > 1) {
                    // 多个人
                    pos.classList.add('person');
                    pos.textContent = cell; // 显示人数
                    pos.style.fontSize = '24px'; // 稍大的字体
                    pos.style.fontWeight = 'bold';
                    pos.style.color = '#ffffff'; // 纯白色更醒目
                    pos.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.8)'; // 添加阴影增强可读性
                    pos.style.lineHeight = '1'; // 确保垂直居中
                }
                
                // 添加选中状态
                if (gameState.selectedPiece === index) {
                    pos.classList.add('selected');
                }
            });
            
            // 更新信息显示
            document.getElementById('player-role').textContent = 
                gameState.playerRole === 'tiger' ? '🐅 老虎' : '👤 人类';
            
            document.getElementById('current-turn').textContent = 
                gameState.currentTurn === 2 ? '老虎回合' : '人类回合';
            
            const totalPeople = gameState.board.filter(cell => cell === 1 || cell > 1)
                                           .reduce((sum, cell) => sum + (cell > 1 ? cell : 1), 0);
            document.getElementById('people-count').textContent = totalPeople;
            document.getElementById('eaten-count').textContent = gameState.eatenPeople;
            
            // 更新状态
            if (!gameState.gameOver) {
                if ((gameState.playerRole === 'tiger' && gameState.currentTurn === 2) ||
                    (gameState.playerRole === 'person' && gameState.currentTurn === 1)) {
                    document.getElementById('status').textContent = '轮到你了！点击你的棋子选择移动';
                } else {
                    document.getElementById('status').textContent = 'AI正在思考...';
                }
            }
        }
        
        // 重置游戏
        function resetGame() {
            initAudio();
            sounds.select();
            clearMoveArrows(); // 清除移动箭头
            initGame();
        }
        
        // 返回角色选择
        function backToRoleSelection() {
            document.getElementById('game-board').classList.remove('active');
            document.getElementById('role-selection').style.display = 'block';
            document.querySelectorAll('.role-button').forEach(btn => {
                btn.classList.remove('selected');
            });
            gameState.playerRole = null;
        }
        
        // 切换规则显示
        function toggleRules() {
            const rules = document.getElementById('rules');
            rules.style.display = rules.style.display === 'none' ? 'block' : 'none';
        }
        
        // 评估移动（保留原函数作为后备）
        function evaluateMove(from, to) {
            return evaluateMoveAdvanced(from, to);
        }
        
        // 显示移动箭头
        function showMoveArrow(from, to) {
            const board = document.getElementById('board');
            const fromPos = positions[from];
            const toPos = positions[to];
            
            // 计算箭头的起点和终点（考虑棋子半径偏移）
            const pieceRadius = 25; // 棋子半径
            const startX = fromPos.x;
            const startY = fromPos.y;
            const endX = toPos.x;
            const endY = toPos.y;
            
            // 计算方向向量
            const dx = endX - startX;
            const dy = endY - startY;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            // 单位方向向量
            const unitX = dx / distance;
            const unitY = dy / distance;
            
            // 调整起点和终点，避免箭头被棋子遮挡
            const adjustedStartX = startX + unitX * pieceRadius;
            const adjustedStartY = startY + unitY * pieceRadius;
            const adjustedEndX = endX - unitX * pieceRadius;
            const adjustedEndY = endY - unitY * pieceRadius;
            
            // 计算调整后的长度
            const adjustedLength = Math.sqrt(
                (adjustedEndX - adjustedStartX) ** 2 + 
                (adjustedEndY - adjustedStartY) ** 2
            );
            
            // 创建箭头容器
            const arrow = document.createElement('div');
            arrow.className = 'move-arrow';
            arrow.style.position = 'absolute';
            arrow.style.left = adjustedStartX + 'px';
            arrow.style.top = adjustedStartY + 'px';
            arrow.style.width = adjustedLength + 'px';
            arrow.style.height = '6px';
            arrow.style.transformOrigin = '0 50%';
            arrow.style.pointerEvents = 'none';
            arrow.style.zIndex = '10';
            
            // 计算旋转角度
            const angle = Math.atan2(dy, dx) * 180 / Math.PI;
            arrow.style.transform = `rotate(${angle}deg)`;
            
            // 创建SVG箭头
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('width', adjustedLength);
            svg.setAttribute('height', '6');
            svg.setAttribute('viewBox', `0 0 ${adjustedLength} 6`);
            svg.style.overflow = 'visible';
            
            // 箭头主体线条
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', '0');
            line.setAttribute('y1', '3');
            line.setAttribute('x2', adjustedLength - 12);
            line.setAttribute('y2', '3');
            line.setAttribute('stroke', '#FF6B35');
            line.setAttribute('stroke-width', '4');
            line.setAttribute('stroke-linecap', 'round');
            
            // 箭头头部
            const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
            const headSize = 8;
            const headX = adjustedLength - 2;
            arrowHead.setAttribute('points', 
                `${headX},3 ${headX - headSize},${3 - headSize/2} ${headX - headSize},${3 + headSize/2}`
            );
            arrowHead.setAttribute('fill', '#FF6B35');
            arrowHead.setAttribute('stroke', '#FF6B35');
            arrowHead.setAttribute('stroke-width', '1');
            
            svg.appendChild(line);
            svg.appendChild(arrowHead);
            arrow.appendChild(svg);
            board.appendChild(arrow);
            
            // 添加动画效果
            arrow.style.opacity = '0';
            arrow.style.transform = `rotate(${angle}deg) scale(0.8)`;
            
            // 动画显示
            setTimeout(() => {
                arrow.style.transition = 'all 0.3s ease-out';
                arrow.style.opacity = '1';
                arrow.style.transform = `rotate(${angle}deg) scale(1)`;
            }, 50);
            
            // 2秒后淡出并移除
            setTimeout(() => {
                arrow.style.transition = 'all 0.5s ease-in';
                arrow.style.opacity = '0';
                arrow.style.transform = `rotate(${angle}deg) scale(0.8)`;
                
                setTimeout(() => {
                    if (arrow.parentNode) {
                        arrow.parentNode.removeChild(arrow);
                    }
                }, 500);
            }, 1500);
        }
        
        // 清除所有移动箭头
        function clearMoveArrows() {
            const arrows = document.querySelectorAll('.move-arrow');
            arrows.forEach(arrow => {
                if (arrow.parentNode) {
                    arrow.parentNode.removeChild(arrow);
                }
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 默认显示角色选择界面
        });
    </script>
</body>
</html> 